<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Font及text操作Text- overflow 案例</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        body{font: 14px/1.6 "Microsoft YaHei";color: #666;}
        ul.list{font: 12px/1.6 微软雅黑,宋体,Helvetica,sans-serif;margin-left: 100px;}
        ul.list li {list-style: none;width: 250px;padding: 10px;border: 1px solid #ddd;margin-bottom: 10px;}
        ul.list li h3 {color: inherit;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;line-height: 35px;}
        ul.list li h3 a {color: #666;text-decoration: none;}
        ul.list li p{line-height: 20px;}
        ul.list li p span{color: #ff0084;font-weight: bold;}
        ul.list li p.time{margin: 5px 0;}
        ul.list li p i{color: #f30;font-style: normal;margin-right: 10px;}
    </style>
</head>
<body>
<ul class="list">
    <li>
        <a href=""><img src="images/pic1.jpg" alt="西门子洗碗机" width="250" height="188"></a>
        <h3><a href="">动画便利店X果壳网《西门子洗碗机》 by 动画便利店</a></h3>
        <p><span>原创作品</span> - 影视 - Motion Graphic </p>
        <p class="time">3小时前上传</p>
        <p><i>1284 </i> 人气/ <i>11</i> 评论 / <i>47</i> 推荐</p>
        <img src="images/play.png">
    </li>

    <li>
        <a href=""><img src="images/pic2.jpg" alt="西门子洗碗机" width="250" height="188"></a>
        <h3><a href="">动画便利店X果壳网《西门子洗碗机》 by 动画便利店</a></h3>
        <p><span>原创作品</span> - 影视 - Motion Graphic </p>
        <p class="time">3小时前上传</p>
        <p><i>1284 </i> 人气/ <i>11</i> 评论 / <i>47</i> 推荐</p>
        <img src="images/play.png">
    </li>

</ul>

</body>
</html>